關於 DOM 可以在網路上找到更多 詳細的介紹，這邊我就用我的理解跟大家做簡單介紹，DOM 的英文是（Document Object Model-文件物件模型)，每一個在HTML的標籤或是寫內容文字都算是 Object(物件)，而這些物件都會構成一個類似樹狀的模型！

今天寫了一份 HTML 經過瀏覽器的解析後它會呈現這樣的樹狀結構：

在這個樹狀的結構中每個元素都被視為一個節點，可以透過 JavaScript 去改變這些元素的屬性或是標籤內的文字，這樣就能達成透過 JS 跟網頁去做各種互動了，包括改變元素的顏色或是更換標籤的屬性等等的.....

querySelector 選擇單一元素

剛已經知道可以透過 JS 藉由 DOM 這個存在瀏覽器的介面去改變 HTML 元素，那如何選擇元素呢，那就是用 querySelector 選取的語法如下：

HTML

<div id='demo'>我是標題<div>

JS

document.querySelector('#demo').textContent ="更改標題";
//選取 ID 這個標籤

像上面的語法一樣就能去選取到標籤，如果今天不是id 而是一個 class 那就變成下面這樣，如果您學過 CSS 的話就知道這個就像是CSS選取器的語法是一樣的。

document.querySelector('.demo').textContent ="更改標題";
//選取 class 這個標籤

querySelectorAll 重複選取多個元素

這個語法是可以一次選取同樣的元素，一份 html 可能有很多元素是重複的如果用剛剛的querySelector 語法不就要一個一個去選取，此時用這語法就可以把全部 class 都是 demo 的元素選取起來一次替換要變更的內容，語法如下：

document.querySelectorAll('.demo').textContent ="更改標題";
//更改了全部 class 都是 demo 的元素內容

setAttribute 增加標籤屬性

前面有提到透過 JS 可以跟網頁的元素有很多的互動，當然也能變更屬性如果今天HTML結構是這樣：
HTML

<a href="#">我是 GOOGLE 網站</a>

JS

document.querySelector('a').setAttribute('href','http://www.google.com.tw');

setAttribute('屬性名稱','屬性內容') 用這樣的方法就能在原本沒有網址的連結放入一個網址了，當然也可以去更改顏色囉！再看看以下語法：
HTML

<div id='demo'>我是標題<div>

CSS

#demo{
  color:red;
  font-size: 30px;
}

JS

document.querySelector('#demo').setAttribute('id','demo');

getAttribute 取得標籤屬性值

這邊還可以取得標籤的屬性例如我想要知道這個標籤屬性的值，寫法如下：
HMTL

 <a href="http://www.google.com">我是 GOOGLE 網站</a>

JS

document.querySelector('a').getAttribute('href');

額外補充

每次如果要變選取文字或變更文字都要打 document.querySelector('#demo').textContent ="更改標題";
其實可以用變數把這個指令存起來像是這樣

var el = document.querySelector('#demo');

這樣如果要變更內容或是變更屬性只需要這樣打就可以囉！

el.textContent = "更改標題" //改內容
el.setAttribute('href','http://www.google.com.tw'); //增加屬性

今天介紹了幾種透過 JS 去操作 DOM 的方法，後續我們會在介紹更多，休息一下迎接明天的內容吧！